﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
    int lang = (int)ViewData["Language"];
    VietImage.Models.Lightbox lb = (VietImage.Models.Lightbox)ViewData["Lightbox"];
    int count = 0;
    if (lb != null && lb.Images != null && lb.Images.Count > 0)
    {
        count = lb.Images.Count;
    }
    else
    {
        return;
    }
%>

    <div class="underline" style="margin: 20px auto 20px auto; padding: 20px; width:800px;">
        <div style="float: left;"> <span>Xem ảnh dạng</span> : <%= Html.ActionLink("Thumbnail", "Index", "Lightbox", new { id = lb.ID, opt = "Thumbnail" }, new { @class = "activelink"}) %> | <%= Html.ActionLink("Chi tiết", "Index", "Lightbox", new { id = lb.ID, opt = "Detail" }, new { @class = "activelink"})%></div>
        <div style="float: right;"> 
            <a id="selectall"><span>Chọn tất cả</span> <img src="~/Content/Images/checked.png" /></a> &nbsp
            <a id="deselectall"><span>Bỏ chọn</span> <img src="~/Content/Images/x.png" /></a> &nbsp
            <a id="deletefromlightbox"><span>Xóa khỏi Lightbox</span> <img src="~/Content/Images/x.png" /></a> &nbsp
            <span>Download Images</span> <img src="~/Content/Images/cart.png" /> &nbsp
            <span>Chép vào lightbox</span> 
            <select id="cmbLightboxList2" name="cmbLightboxList2">
            </select>
        </div>
    </div>



    <div id="lightboxdetail">
    <div id="Gallery" style="clear:both; width:1000px; position:relative; left:50%; margin-left:-500px; padding-top:30px; ">
<% 
    if (Request["opt"] != "Detail")
    {
        VietImage.Models.Image img = new VietImage.Models.Image();
        Double h = ((Double)count / 2) + 0.5;
        int itemwidth = 200;
        int half = (int)h;
%>

        <div class="scrollbar2" style=" clear:both; width: 1000px; height:500px; margin-top:-10px;">
            <div class="scrollbar" style="width: 600px;"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
            <div class="viewport" id="viewport" style="width: 1000px; height:500px; margin-top:50px;">
                <div class="overview" style="<%= "width:" + half * itemwidth + "px;" %>">

<% 
        for (int i = 0; i < count; )
        {
            img = lb.Images[i++];
%>
                    <div style="float:left;">

                        <div style="margin-left:10px; margin-right:10px;">
                            <div style="width:180px; height:250px;">                                
                                <div class="dotpanel" style="width:180px; height:180px;">
                                    <img src="/Image/Display/<%= img.ID %>" width="180px" height="180px" alt="" onclick="opendetailimagepanel(<%= img.ID %>);" style="cursor:pointer;"/>
                                </div>
                                <div style="margin-top:10px;">
                                    <div><div id="img_<%= img.ID %>" class="checkbox" style="float:left; margin-right: 5px; margin-bottom :5px;"><div class="checked" style="display: none;"></div></div><%= img.GetDetail(lang).Name%></div>
                                    <div style="clear:both;"><div class="downloadbutton" style="float:left;"></div><span><a>Fullsize</a> | <a>Smallsize</a> | <a>Thumbmail</a></span></div>
                                </div>
                            </div>
                        </div>

<%
            if (i < count)
            {
                img = lb.Images[i++];
%>
                        <div style="margin-left:10px; margin-right:10px;">
                            <div style="width:180px; height:250px;">                                
                                <div class="dotpanel" style="width:180px; height:180px;">
                                    <img src="/Image/Display/<%= img.ID %>" width="180px" height="180px" alt="" onclick="opendetailimagepanel(<%= img.ID %>);" style="cursor:pointer;"/>
                                </div>
                                <div style="margin-top:10px;">
                                    <div><div id="img_<%= img.ID %>" class="checkbox" style="float:left; margin-right: 5px; margin-bottom :5px;"><div class="checked" style="display: none;"></div></div><%= img.GetDetail(lang).Name%></div></div>
                                    <div style="clear:both;"><div class="downloadbutton" style="float:left;"></div><span><a>Fullsize</a> | <a>Smallsize</a> | <a>Thumbmail</a></span></div>
                                </div>
                            </div>
<%
            } 
%>
                         </div>
<%
        }
%>


                   </div>
                </div>
            </div>
        </div>
<% 
    }
    else
    {
%>

<table style="width: 1000px; text-align: center; font-weight: bold;">
    <tr>
        <td width="50">Chọn</td>
        <td width="400">Tên ảnh</td>
        <td width="100">Chỉ tiết ảnh</td>
        <td width="150">Tải nguyên cỡ nhỏ</td>
        <td width="150">Tải ảnh cỡ nhỏ</td>
        <td width="150">Tải nguyên kích thước</td>
    </tr>
</table>

                <div class="scrollbar1" style="width:1008px; ">
		            <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		                <div class="viewport" style="width:1000px; height:425px;">
			                <div class="overview">

<table style="width: 1000px;">

<%
    VietImage.Models.Image img = new VietImage.Models.Image();
    for (int i = 0; i < count; i++)
    {
        img = lb.Images[i];
%>
    <tr height="100">
        <td width="40"><div id="img_<%= img.ID %>" style="margin: auto;" class="checkbox imgcheckbox"><div class="checked" style="display: none;"></div></div></td>
        <td width="410"><%= img.GetDetail(lang).Name%></td>
        <td width="100"><div style="border: 1px #FFF dotted; width: 100px; height: 100px;"><img onclick="opendetailimagepanel(<%= img.ID %>);"  width="100" style="cursor: pointer; height: 100px; width: 100px;" src="/Image/Display/<%= img.ID %>" /></div></td>
        <td width="150"><div id="s_img<%= img.ID %>" style="margin: auto;" class="checkbox"><div class="checked" style="display: none;"></div></div></td>
        <td width="150"><div id="t_img<%= img.ID %>" style="margin: auto;" class="checkbox"><div class="checked" style="display: none;"></div></div></td>
        <td width="150"><div id="f_img<%= img.ID %>" style="margin: auto;" class="checkbox"><div class="checked" style="display: none;"></div></div></td>
    </tr>
<%
    }
%>

</table>
                            </div>
                        </div>
                </div>
<%
    }
%>
                </div>
    </div>



<script>
    $("#cmbLightboxList2").html($("#cmbLightboxList").html());
</script>
